<template>
  <div class="xxx">
    我是app.vue
    <h3>{{ msg }}</h3>
    <ul>
      <!-- vscode里装了一个vetur插件，他内部也有一丢丢的语法规范检查 -->
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <!-- 放到ul后面显示 -->
    <!-- <son></son> -->

    <!-- 如果遵循的是大驼峰，既可以写大驼峰标签页可以写小写的名字，单词之间加`-` -->
    <new-son />
    <!-- 直接用大驼峰也可以 -->
    <NewSon />

    <panel />

    <panel />
  </div>
</template>

<script>
// es6的模块化导入语法
import son from './components/son.vue'

// 导入折叠面板组件
import panel from './components/panel'
export default {

  // 注册子组件
  components: {
    // son // 他其实是son: son的形式
    // 假如你希望给这个组件重新起个名字
    NewSon: son,
    panel
  },
  // 组件里，必须是一个函数，函数里return一个对象
  data () {

    return {
      // 在这里声明vue里的数据
      msg: 'hello',
      list: [10,20,30,40,50]
    }
  },
};
</script>

<style>
</style>